<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML预览</title>

    <!-- 引入Summernote的样式 -->
    <link href="/ajax/libs/summernote/summernote.css" rel="stylesheet">

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        body.loading::after {
            content: "正在处理，请稍候...";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #333;
        }

        .container {
            display: flex;
            height: 100vh; /* 占据全屏高度 */
            gap: 20px;
            padding: 20px;
            box-sizing: border-box;
        }

        .editor-container,
        .preview-container {
            flex: 1;
            height: calc(100% - 40px); /* 减去标题高度 */
            display: flex;
            flex-direction: column;
        }

        h3 {
            margin: 0 0 10px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

        #rawContent {
            width: 100%;
            flex: 1;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: none;
            box-sizing: border-box;
            font-family: monospace;
        }

        .preview-area {
            flex: 1;
            border: 1px solid #ccc;
            background: #fff;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        /* iframe样式 */
        #previewIframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

    <script src="/js/jquery.min.js?v=3.6.3"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
<div class="container">
    <div class="editor-container">
        <h3>编辑区域</h3>
        <textarea id="rawContent" placeholder="请在此输入HTML内容"></textarea>
    </div>

    <div class="preview-container">
        <h3>预览区域</h3>
        <!-- 将预览区域改为iframe -->
        <iframe id="previewIframe" class="preview-area"></iframe>
    </div>
</div>

<script>
    // 实时预览功能
    const rawContent = document.getElementById('rawContent');
    const previewArea = document.getElementById('previewArea');

    function updatePreview() {
        try {
            const iframe = document.getElementById('previewIframe');
            const content = rawContent.value;

            // 构建完整的HTML结构
            const iframeContent = `
            <!DOCTYPE html>
            <html>
            <head>
                <link href="/ajax/libs/summernote/summernote.css" rel="stylesheet">
                <style>
                    body {
                        margin: 0;
                        padding: 15px;
                        font-family: inherit; /* 继承父级字体 */
                    }
                </style>
            </head>
            <body>
                ${content}
            </body>
            </html>`;

            // 写入iframe内容
            iframe.contentDocument?.open();
            iframe.contentDocument?.write(iframeContent);
            iframe.contentDocument?.close();
        } catch (e) {
            console.error('预览更新失败:', e);
            iframe.contentDocument.body.innerHTML = `<p>预览渲染失败: ${e.message}</p>`;
        }
    }

    rawContent.addEventListener('input', updatePreview);

    // 初始化示例
    window.onload = function () {
        // 获取URL中的id参数
        const id = getParameterByName('id');
        if (id) {
            loadContent(id);
        }
    }

    // 窗口大小变化时重置高度
    window.addEventListener('resize', () => {
        document.querySelectorAll('.editor-container, .preview-container')
            .forEach(el => el.style.height = `calc(100% - 40px)`);
    });

    // 获取URL参数
    function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    // 模拟富文本内容加载
    // 模拟富文本内容加载
    function loadContent(id) {
        try {
            showLoadingIndicator(true);

            axios.get('/api/article/detail?articleId=' + id)
                .then(response => {
                    // 请求成功，处理响应数据
                    const article = response.data.data; // 假设返回的数据是一个对象
                    rawContent.value = article.articleContent || "<p>文章内容为空。</p>";
                })
                .catch(error => {
                    // 请求失败，处理异常情况
                    rawContent.value = "<p>无法加载文章内容，请稍后再试。</p>";
                })
                .finally(() => {
                    updatePreview(); // 确保更新预览区域
                    showLoadingIndicator(false); // 隐藏加载指示器
                });
        } catch (error) {
            rawContent.value = `加载失败: ${error.message}`;
            updatePreview(); // 确保更新预览区域
            showLoadingIndicator(false); // 隐藏加载指示器
        }
    }

    function showLoadingIndicator(show) {
        if (show) {
            document.body.classList.add('loading');
        } else {
            document.body.classList.remove('loading');
        }
    }
</script>
</body>
</html>